<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="login">
    		
    		<jsp:include page="nav.jsp"></jsp:include>
    		
    		<fmt:bundle basename="i18n">
    		<div class="banner"><img src="images/banner.png"  alt=""></div>
    		<div class="con">
    			<div class="breed-tab"><fmt:message key="recharge.position"></fmt:message></div>
	    		<div class="content-recharge">
	    			<div class="form">
	    				<div class="form-close"><a href="#"><img src="images/back.png"></a></div>
	    				<div class="form-con">
		    				<div class="form-l">
		    					<div class="form-l-t">
		    						<ul>
		    							<li>
		    								<select>
		    									<option><fmt:message key="recharge.selectGame"></fmt:message></option>
		    									<option><fmt:message key="recharge.selectGame"></fmt:message></option>
		    									<option><fmt:message key="recharge.selectGame"></fmt:message></option>
		    								</select>
		    							</li>
		    							<li>
		    								<select>
		    									<option><fmt:message key="recharge.selectServer"></fmt:message></option>
		    									<option><fmt:message key="recharge.selectServer"></fmt:message></option>
		    									<option><fmt:message key="recharge.selectServer"></fmt:message></option>
		    								</select>
		    							</li>
		    							<li>
		    								<select>
		    									<option><fmt:message key="recharge.selectRole"></fmt:message></option>
		    									<option><fmt:message key="recharge.selectRole"></fmt:message></option>
		    									<option><fmt:message key="recharge.selectRole"></fmt:message></option>
		    								</select>
		    							</li>
		    						</ul>
		    					</div>
		    					<div class="form-l-b">
		    						<ul>
		    							<li><span><img src="images/contry_01.png"></span><span>Global</span></li>
		    							<li><span><img src="images/contry_02.png"></span><span>Malaysia</span></li>
		    							<li><span><img src="images/contry_03.png"></span><span>Singapore</span></li>
		    							<li><span><img src="images/contry_04.png"></span><span>Thailanal</span></li>
		    							<li><span><img src="images/contry_05.png"></span><span>Philippiness</span></li>
		    							<li><span><img src="images/contry_06.png"></span><span>Indonesia</span></li>
		    						</ul>
		    					</div>
		    				</div>
		    				<div class="form-r">
		    					<div class="form-r-t">
		    						<ul>
		    							<li><fmt:message key="recharge.roleInfo"></fmt:message></li>
		    							<li><fmt:message key="recharge.roleName"></fmt:message></li>
		    							<li><fmt:message key="recharge.server"></fmt:message></li>
		    							<li><fmt:message key="recharge.game"></fmt:message></li>
		    							<li><fmt:message key="recharge.account"></fmt:message></li>
		    						</ul>
		    						<div class="form-r-t-btn">
		    							<a href="recharge2.jsp" class="form-r-t-btn1"><fmt:message key="recharge.record"></fmt:message></a>
		    							<!-- <a href="usercenter.html" class="form-r-t-btn2">返回會員中心</a> -->
		    						</div>
		    					</div>
		    					<div class="form-r-b">
			    					<div class="pay">
			    						<ul class="pay-mathod-tab">
			    							<li><fmt:message key="recharge.recharge1"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge2"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge3"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge4"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge1"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge1"></fmt:message></li>
			    						</ul>
			    						<div class="pay-m">
			    							<div class="pay-m-t"><span class="pay-m-t-l"><fmt:message key="recharge.currentRecharge"></fmt:message></span><span class="back"><fmt:message key="recharge.return"></fmt:message> </span></div>
			    							<ul class="pay-mathod">
				    							<li><span class="count"><i>30</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>0.99</i> USD ></span></li>
				    							<li><span class="count"><i>240</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>3.99</i> USD ></span></li>
				    							<li><span class="count"><i>300</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>4.99</i> USD ></span></li>
				    							<li><span class="count"><i>600</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>9.99</i> USD ></span></li>
				    							<li><span class="count"><i>1200</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>19.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    						</ul>
			    						</div>
			    					</div>
			    					<div class="pay">
			    						<ul class="pay-mathod-tab">
			    							<li><fmt:message key="recharge.recharge1"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge2"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge3"></fmt:message></li>
			    						</ul>
			    						<div class="pay-m">
			    							<div class="pay-m-t"><span class="pay-m-t-l"><fmt:message key="recharge.currentRecharge"></fmt:message></span><span class="back"><fmt:message key="recharge.return"></fmt:message> </span></div>
			    							<ul class="pay-mathod">
				    							<li><span class="count"><i>30</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>0.99</i> USD ></span></li>
				    							<li><span class="count"><i>240</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>3.99</i> USD ></span></li>
				    							<li><span class="count"><i>300</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>4.99</i> USD ></span></li>
				    							<li><span class="count"><i>600</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>9.99</i> USD ></span></li>
				    							<li><span class="count"><i>1200</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>19.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    						</ul>
			    						</div>
			    					</div>
			    					<div class="pay">
			    						<ul class="pay-mathod-tab">
			    							<li><fmt:message key="recharge.recharge1"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge2"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge3"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge4"></fmt:message></li>
			    						</ul>
			    						<div class="pay-m">
			    							<div class="pay-m-t"><span class="pay-m-t-l"><fmt:message key="recharge.currentRecharge"></fmt:message></span><span class="back"><fmt:message key="recharge.return"></fmt:message> </span></div>
			    							<ul class="pay-mathod">
				    							<li><span class="count"><i>30</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>0.99</i> USD ></span></li>
				    							<li><span class="count"><i>240</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>3.99</i> USD ></span></li>
				    							<li><span class="count"><i>300</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>4.99</i> USD ></span></li>
				    							<li><span class="count"><i>600</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>9.99</i> USD ></span></li>
				    							<li><span class="count"><i>1200</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>19.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    						</ul>
			    						</div>
			    					</div>
			    					<div class="pay">
			    						<ul class="pay-mathod-tab">
			    							<li><fmt:message key="recharge.recharge1"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge2"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge3"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge4"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge4"></fmt:message></li>
			    						</ul>
			    						<div class="pay-m">
			    							<div class="pay-m-t"><span class="pay-m-t-l"><fmt:message key="recharge.currentRecharge"></fmt:message></span><span class="back"><fmt:message key="recharge.return"></fmt:message> </span></div>
			    							<ul class="pay-mathod">
				    							<li><span class="count"><i>30</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>0.99</i> USD ></span></li>
				    							<li><span class="count"><i>240</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>3.99</i> USD ></span></li>
				    							<li><span class="count"><i>300</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>4.99</i> USD ></span></li>
				    							<li><span class="count"><i>600</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>9.99</i> USD ></span></li>
				    							<li><span class="count"><i>1200</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>19.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    						</ul>
			    						</div>
			    					</div>
			    					<div class="pay">
			    						<ul class="pay-mathod-tab">
			    							<li><fmt:message key="recharge.recharge1"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge2"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge3"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge4"></fmt:message></li>
			    						</ul>
			    						<div class="pay-m">
			    							<div class="pay-m-t"><span class="pay-m-t-l"><fmt:message key="recharge.currentRecharge"></fmt:message></span><span class="back"><fmt:message key="recharge.return"></fmt:message> </span></div>
			    							<ul class="pay-mathod">
				    							<li><span class="count"><i>30</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>0.99</i> USD ></span></li>
				    							<li><span class="count"><i>240</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>3.99</i> USD ></span></li>
				    							<li><span class="count"><i>300</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>4.99</i> USD ></span></li>
				    							<li><span class="count"><i>600</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>9.99</i> USD ></span></li>
				    							<li><span class="count"><i>1200</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>19.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    						</ul>
			    						</div>
			    					</div>
			    					<div class="pay">
			    						<ul class="pay-mathod-tab">
			    							<li><fmt:message key="recharge.recharge1"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge2"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge3"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge4"></fmt:message></li>
			    							<li><fmt:message key="recharge.recharge4"></fmt:message></li>
			    						</ul>
			    						<div class="pay-m">
			    							<div class="pay-m-t"><span class="pay-m-t-l"><fmt:message key="recharge.currentRecharge"></fmt:message></span><span class="back"><fmt:message key="recharge.return"></fmt:message> </span></div>
			    							<ul class="pay-mathod">
				    							<li><span class="count"><i>30</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>0.99</i> USD ></span></li>
				    							<li><span class="count"><i>240</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>3.99</i> USD ></span></li>
				    							<li><span class="count"><i>300</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>4.99</i> USD ></span></li>
				    							<li><span class="count"><i>600</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>9.99</i> USD ></span></li>
				    							<li><span class="count"><i>1200</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>19.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    							<li><span class="count"><i>3000</i><fmt:message key="recharge.spar"></fmt:message></span><span class="price"><i>49.99</i> USD ></span></li>
				    						</ul>
			    						</div>
			    					</div>
			    						
		    					</div>
		    				</div>
		    			</div>
	    			</div>
	    		</div>
    		</div>
    		</fmt:bundle>
    	</div>
</body>

 <script type="text/javascript">
    	$(function(){
    		$(".pay-mathod-tab li").click(function(){
    			$(".pay-m").show();
    			$(".pay-mathod-tab").hide();
    		})
    		$(".pay").eq(0).show();
    		$(".pay .back").click(function(){
    			var index = $(this).closest(".pay").index();
    			console.log(index);
    			$(".form-r-b .pay").eq(index).find(".pay-mathod-tab").show();
    			$(".form-r-b .pay").eq(index).find(".pay-m").hide();
    			/*$(".pay-m").hide();
    			$(".pay-mathod-tab").show();*/
    		})
    		$(".form-l-b li").click(function(){
    			var index = $(this).index();
    			console.log(index);
    			$(".form-r-b .pay").eq(index).show().siblings().hide();
    			$(".form-r-b .pay").eq(index).find(".pay-mathod-tab").show();
    			$(".form-r-b .pay").eq(index).find(".pay-m").hide();
    		})
    	})
    </script>
</html>